<template>
    <div class="content" v-loading="loading">

        <!--头部-->
        <div class="header-setting">

            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>系统配置</a-breadcrumb-item>
                <a-breadcrumb-item>特殊车牌管理</a-breadcrumb-item>
            </a-breadcrumb>

            <!--查询条件-->
            <div class="box-condition-body">

                <div class="box-condition-item">
                    <div style="margin: 0 50px">车牌号</div>
                    <template>
                        <a-input v-model="condition.plate" style="margin: 0 100px 0 0px;width: 200px"
                                 placeholder="车牌号"/>
                    </template>
                    <div style="margin: 0 50px">删除状态</div>
                    <div class="btn-control" :class="isBtnActive(1)" @click="selectStatus(1)">
                        未删除
                    </div>
                    <div class="btn-control" :class="isBtnActive(0)" @click="selectStatus(0)">
                        已删除
                    </div>
                </div>

                <div class="box-condition-item">
                    <div style="margin: 0px 35px 0 50px">车主姓名</div>
                    <template>
                        <a-input v-model="condition.name" style="margin: 0 100px 0 0px;width: 200px"
                                 placeholder="车主姓名"/>
                    </template>
                    <div style="margin: 0 50px">联系电话</div>
                    <template>
                        <a-input v-model="condition.phone" style="margin: 0 100px 0 20px;width: 200px"
                                 placeholder="联系电话"/>
                    </template>
                    <a-button type="primary" @click="queryData">确定</a-button>
                    <a-button type="primary" @click="reset" style="margin-left: 20px;">重置</a-button>
                </div>

                <div class="box-condition-item" style="justify-content: center;">

                </div>
            </div>
        </div>


        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div></div>
                <div style="display: flex">
                    <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
                    <a-button type="primary" @click="editClick" icon="edit">编辑</a-button>
                    <a-button type="danger" @click="deleteClick" icon="delete">删除</a-button>
                    <!-- <a-button type="primary" @click="downloadDataClick" icon="download">导出</a-button> -->
                </div>
            </div>

            <!--数据表格-->
            <div class="box-table">
                <a-table :columns="columns"
                         :dataSource="dataSource"
                         :pagination="pagination"
                         bordered size="small"
                         :scroll="scroll"
                         :customRow="customRow"
                         :rowClassName="setRowClassName"
                         @change="queryPageData"
                >
                    <template slot="deviceEnergy" slot-scope="text">
                        <div>{{text}}%</div>
                    </template>
                    <template slot="log" slot-scope="text, record">
                        <a-button type="primary" @click="log_trigger(record.imei)">设备日志</a-button>
                    </template>
                    <template slot="heartbeat" slot-scope="text, record">
                        <a-button type="primary" @click="heartbeat_trigger(record.imei)">心跳历史</a-button>
                    </template>
                </a-table>
            </div>
        </div>

        <!-- 弹窗层(添加 | 编辑) @ok="handleOk"-->
        <a-modal title="内部车辆添加"
                 v-model="addInCarModal.visible"
                 @ok="commitAdd"
                 :confirmLoading="addInCarModal.loading">
            <div class="box-in-car">
                <div class="item-in-car">
                    <div class="text-name">车牌</div>
                    <a-input class="input" v-model="addInCarModal.plate"/>
                </div>
                <div class="item-in-car" style="margin-top: 20px;">
                    <div class="text-name">车主姓名</div>
                    <a-input class="input" v-model="addInCarModal.name"/>
                </div>
                <div class="item-in-car" style="margin-top: 20px;">
                    <div class="text-name">联系方式</div>
                    <a-input class="input" v-model="addInCarModal.phone"/>
                </div>
            </div>
        </a-modal>

    </div>
</template>

<script>
    import ParkApi from '../../api/system/ParkApi';

    const columns = [
        {
            title: "序号",
            dataIndex: "index",
            width: '5%'
        },
        {
            title: "车牌号",
            dataIndex: "plate",
            width: '10%'
        },
        {
            title: "车主姓名",
            dataIndex: "name",
            width: '10%'
        },
        {
            title: "联系电话",
            dataIndex: "phone",
            width: '10%'
        },
        {
            title: "创建人姓名"
            , dataIndex: "createUserNickName"
            , width: '10%'
        },
        {
            title: "创建日期"
            , dataIndex: "createdTime"
            , width: '10%'
        },
        {
            title: "删除人姓名"
            , dataIndex: "deleteUserNickName"
            , width: '10%'
        },
        // {
        //     title: "删除日期"
        //     , dataIndex: "deleteUserNickName"
        //     , width: '10%'
        // },
    ];
    const dataSource = [];

    export default {
        name: "PlateManage",
        /*数据层*/
        data() {
            return {
                columns: columns,
                dataSource: dataSource,

                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 10
                },

                /*表格固定头部*/
                scroll: {
                    y: 550,
                },

                tableState: {
                    rowId: -1,
                },

                /*当前选中的行数据*/
                currRowData: "",

                /* 状态 */
                condition: {
                    plate: "",
                    name: "",
                    phone: "",
                    delStatus: 1,
                },

                /* 弹窗 */
                addInCarModal: {
                    loading: false,
                    visible: false,
                    id: "",
                    plate: "",
                    name: "",
                    phone: "",
                },
                loading: false,
            }
        },
        /*方法层*/
        methods: {
            /* ------------------------- 列表数据 ------------------------- */
            getQueryCondition() {
                return this.condition;
            },

            queryPageData(page) {
                this.queryData(page.current);
            },

            queryData(pageNum) {
                this.loading =  true;
                this.tableState.rowId = -1;

                let condition = this.getQueryCondition();
                condition.curr = pageNum || 1;
                condition.limit = 10;

                ParkApi.getSpecialPlateList(condition)
                    .then((data) => {
                        let {list, total, pageNum, pageSize} = data.data;
                        let array = list || [];
                        array = array.map((item, index) => {
                            return {...item, index: total - (pageNum - 1) * pageSize - index}
                        })
                        this.dataSource = array;
                        this.pagination.total = total;
                        this.loading = false;
                    })
                    .catch(error => {
                        this.$message.error("获取特殊车牌管理失败");
                        this.loading = false;
                    });
            },

            selectStatus(delStatus) {
                this.condition.delStatus = delStatus;
                this.queryData();
            },

            reset() {
                this.condition = {
                    plate: "",
                    name: "",
                    phone: "",
                    delStatus: 1,
                }
                this.queryData();
            },

            /* ------------------------- 条目点击 ------------------------- */
            addClick() {
                this.addInCarModal = {
                    loading: false,
                    visible: true,
                    id: "",
                    plate: "",
                    name: "",
                    phone: "",
                }
            },

            editClick() {
                let item = this.getItem();
                if (!item) {
                    this.$message.error("请先选择一项");
                    return;
                }

                this.addInCarModal = {
                    loading: false,
                    visible: true,
                    id: item.id,
                    plate: item.plate,
                    name: item.name,
                    phone: item.phone,
                }
            },

            deleteClick() {
                let item = this.getItem();
                if (!item) {
                    this.$message.error("请先选择一项");
                    return;
                }

                /* API */
                let {id, plate, name, phone} = item;
                ParkApi.updateSpecialPlate({id, plate, name, phone, isValid: 0})
                    .then(() => {
                        this.queryData();
                    })
                    .catch(data => {
                        this.$message.error(data.msg || "修改异常")
                    })
            },

            downloadDataClick() {

            },

            getItem() {
                return this.dataSource.filter(item => item.id == this.tableState.rowId)[0]
            },

            /* ---------------------------- 弹窗 ------------------------------ */
            commitAdd() {
                let {id, plate, name, phone} = this.addInCarModal;
                if (!name) {
                    this.$message.error("名字不能为空");
                    return;
                }
                if (!plate) {
                    this.$message.error("车牌不能为空");
                    return;
                }
                if (!phone) {
                    this.$message.error("联系电话不能为空");
                    return;
                }

                this.addInCarModal.loading = true;
                if (id) {
                    ParkApi.updateSpecialPlate({id, plate, name, phone})
                        .then(() => {
                            this.addInCarModal.loading = false;
                            this.addInCarModal.visible = false;
                            this.queryData();
                        })
                        .catch(data => {
                            this.$message.error(data.msg || "修改异常")
                        })

                } else {
                    ParkApi.addSpecialPlate({plate, name, phone})
                        .then(() => {
                            this.addInCarModal.loading = false;
                            this.addInCarModal.visible = false;
                            this.queryData();
                        })
                        .catch(data => {
                            this.$message.error(data.msg || "添加异常")
                        })
                }
            },

            /* ------------------------- 自定义属性 ------------------------- */
            customRow(record) {
                return {
                    on: { // 事件
                        click: () => {
                            this.currRowData = record;
                            this.tableState.rowId = record.id;
                        },       // 点击行
                    },
                }
            },

            setRowClassName(record) {
                return record.id === this.tableState.rowId ? 'clickRowStyl' : '';
            },

        },

        computed: {
            isBtnActive() {
                return function (value) {
                    return this.condition.delStatus == value ? "btn-control-active" : '';
                }
            }
        },

        mounted() {
            this.queryData();
        },
    }
</script>

<style scoped>

    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: auto;
        padding-top: 10px;
        padding-bottom: 1px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /*表格行选中背景颜色*/
    .clickRowStyl {
        background-color: #C1E0FD;
    }

    .box-condition-item {
        display: flex;
        align-items: center;
        min-width: 1500px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px 0;
    }

    .box-condition-item .btn-control {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        width: 76px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        margin-left: 20px;
        /* text */
        font-size: 11px;
        cursor: pointer;
    }

    .box-condition-item .btn-control-active {
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        margin: 8px 0;
        width: 100%;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-tool button {
        margin-right: 10px;
    }

    /* 弹窗 */
    .box-in-car {
        padding: 0 30 rpx;
    }

    .box-in-car .item-in-car {
        width: 100%;
        height: 35px;
        /* flex */
        display: flex;
        align-items: center;
    }

    .box-in-car .item-in-car .text-name {
        width: 100px;
        font-weight: 300;
        font-size: 14px;
    }

    .box-in-car .item-in-car .input {
        display: block;
        width: 280px;
        height: 100%;
        padding: 0 12px;
        font-size: 14px;
        line-height: 1.428571429;
        color: #555555;
        vertical-align: middle;
        background-color: #ffffff;
        background-image: none;
        border: 1px solid #cccccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        border: 1px solid #e2e2e4;
        box-shadow: none;
    }
</style>
